/** 上下图文格式 */

import {StyleSheet, TouchableOpacity, View} from 'react-native';
import {BindItem} from '../mobx/home';
import {ObserverText} from './ObserverText';
import {dight} from '../utils';
import {Img} from './Img';
import {dpw176, dpw8} from '../constants';

interface ImgTextProps extends BindItem {
  isHor?: boolean; // 是否是横图
  isTag?: boolean; // 是否显示连载tag
  imgHeight?: any; // 图片的高度
  toDetail?: Function;
}

export const ImgText = (props: ImgTextProps) => {
  const {
    Author,
    ChapterCount,
    CoverUrl,
    ExtensionUrl,
    ReadCount,
    Status,
    Title,
    Description,
    isHor,
    isTag,
    imgHeight = dpw176,
    toDetail,
    BID,
  } = props;

  return (
    <TouchableOpacity
      style={styles.box}
      onPress={() => {
        toDetail && toDetail({BID});
      }}>
      <View>
        <Img
          url={isHor ? ExtensionUrl : CoverUrl}
          style={[styles.img, {height: imgHeight}]}
        />
        {isTag && (
          <ObserverText style={styles.tag} tKey="serialize" type="tag" />
        )}
      </View>
      <ObserverText
        tKey={Title || ''}
        type="card-title"
        numberOfLines={1}
        ellipsizeMode="tail"
      />
      <ObserverText
        tKey="hotNum"
        tOptions={{number: dight(ReadCount)}}
        type="desc"
      />
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  box: {
    overflow: 'hidden',
    width: '100%',
    height: '100%',
  },
  img: {
    objectFit: 'cover',
    width: '100%',
    margin: 0,
    borderRadius: dpw8,
  },
  tag: {
    position: 'absolute',
    left: 0,
    bottom: 0,
  },
});
